/* eslint-disable quotes */
/* eslint-disable quote-props */
import React from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { Card, Table, Pagination, Dialog, Button, Divider } from '@alifd/next';
import DataForm from './DataForm';

import styles from './index.module.scss';
import { useStore } from '@/hooks';

const DataList = observer(() => {
  const { dictStore: store } = useStore();
  // 当前行的对象
  const [current, setCurrent] = React.useState();
  const handleDelete = (d) => {
    Dialog.confirm({
      title: i18n.t('确认'),
      content: `${i18n.t('确认删除【')}${d.name}${i18n.t('】吗？')}`,
      onOk: () => {
        store.delete(d.dictId).catch((e) => FAIL(i18n.t('删除失败: ') + e));
      },
    });
  };

  React.useEffect(() => {
    store.fetch();
  }, []);

  // eslint-disable-next-line prefer-template
  const linkCell = (v, i, r) => <Link to={`/sys/dicts/${r.mode === 1 ? r.dictId : ('tree_' + r.dictId)}`}>{v}</Link>;
  // const linkCell = (v, i, r) => <Link to={`/sys/dicts/${r.mode === 1 ? r.dictId : (r.dictId + '/tree') }`}>{v}</Link>;
  return (
    <Card free className={styles.container}>
      <Card.Content>
        <Table.StickyLock
          dataSource={store.data}
          hasBorder={false}
          // isZebra
          loading={store.loading}
        >
          <Table.Column title={i18n.t('序号')} width={80} cell={(v, i) => store.idx(i)} />
          <Table.Column title={i18n.t('标识')} dataIndex="dictId" align="center" cell={linkCell} />
          <Table.Column title={i18n.t('名称')} dataIndex="name" align="center" cell={linkCell} />
          <Table.Column title={i18n.t('参数类型')} dataIndex="mode" align="center" cell={(v) => (v === 2 ? '树形' : '键值对')} />
          <Table.Column title={i18n.t('说明')} dataIndex="description" align="center" />
          <Table.Column
            title={i18n.t('操作')}
            dataIndex="dictId"
            align="center"
            width={120}
            cell={(v, i, r) => {
              return (
                <div>
                  <Button text type="primary" onClick={() => setCurrent(r)}>编辑</Button>
                  <Divider direction="ver" />
                  <Button text type="primary" onClick={() => handleDelete(r)}>删除</Button>
                </div>);
            }}
          />
        </Table.StickyLock>
        <Pagination
          style={{ textAlign: "right" }}
          {...PGPROP}
          pageSize={store.pageSize}
          current={store.pageNo}
          total={store.total}
          totalRender={(total) => <span style={{ marginLeft: 12, color: 'var(--pagination-size-selector-title-color, #999999)' }}>{`共 ${total} 条`}</span>}
          pageSizeSelector="dropdown"
          pageSizeList={[10, 20, 50, 100]}
          onPageSizeChange={(size) => store.setSizeList(size)}
          onChange={(pgNo) => store.setPageNo(pgNo)}
        />
      </Card.Content>
      <Dialog
        className="tau-ui-dialog"
        title={i18n.t('修改字典')}
        visible={!!current}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setCurrent()}
        footer={false}
      >
        <DataForm editData={current} onSubmit={() => setCurrent(undefined)} onCancel={() => setCurrent(undefined)} />
      </Dialog>
    </Card>
  );
});

export default DataList;
